<template>
	<!-- 图书信息 -->
	<view class="content">
		<view class="header">
			<u-icon name="arrow-left" size="20" style="display: inline-block;"></u-icon>
			<span style="font-size: 40rpx;">第一章，练气第三层</span>
		</view>
		<view class="body">
			<!-- 章节内容 -->
			<scroll-view id="shdfsgd" :scroll-into-view="scrollIntoViewId" :show-scrollbar="false" scroll-y="true"
			 style="width: 100%;height: 100%;" @scroll="scroll" @scrolltolower = "getNextChapter" >
				<view id="demo123">
					<div v-for="item,index in chapters"
					:id= "'chapter'+item.id" :key="index" :ref = "'chapter'+item.id"  v-html="item.content"
					></div>
				</view>
				<u-loading-icon :show="true" mode="semicircle" text="加载中..."></u-loading-icon>
			</scroll-view>
		</view>
		<view class="footer">
			<label> 1/571</label>
			<view style="float: right;align-items: center;">
				<!-- 时间 -->
				<label>{{currTime}}</label>
				<!-- 电量显示 -->
				<progress :percent="30" activeColor="#918268"
					class="battery" stroke-width="8" style="display: inline-flex;width: 35rpx;margin-left: 20rpx;" />
			</view>
		</view>
	</view>
</template>

<script>
	import batteryVue from '../../components/battery.vue';
	import * as request from '@/api/request';
	export default {
		name: "read",
		components:{batteryVue},
		data() {
			return {
				// 当前书籍id
				currBookId:"",
				status: "more",
				// 是否打开配置弹出层
				isOpenConfig: false,
				// 当前章节索引
				currIndex: 0,
				// 章节内容
				currChapter: {},
				book:{},
				chapters:[],
				scrollIntoViewId:"",
				currTime:"",
				scrollToTop:0
			};
		},
		onReachBottom() {
			this.status = "loading"
			this.getNextChapter();
			uni.showToast({
				title: "触发下拉刷新了"
			})
		},
		// navigate.vue页面接受参数
		onLoad: function (option) {
			// 获取时间
			this.getCurrTime();
			setInterval(()=>{
				this.getCurrTime()
			},10000)
			
			// 获取电量
			this.getCurrBatteryInfo()
			this.currBookId = option.id
			// 获取图书信息
			this.getBookInfo();
			// 获取第一章
			this.getNextChapter();
		},
		methods: {
			back() {

				uni.showToast({
					title: "返回"
				})
				uni.navigateBack({
					success() {
						console.log("成功")
					},
					fail(e) {
						console.log("失败", e)
					}
				});
			},
			// 打开小说设置页面
			openConfig() {
				this.isOpenConfig = !this.isOpenConfig;
				console.log(this.isOpenConfig)
			},
			// 获取图书信息
			getBookInfo(){
				request.get("/business/book/" + this.currBookId)
					.then((res) => {
						this.book = res.data;
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "数据加载失败",
							icon: 'error'
						})
					})
			},
			// 获取上一章
			getPreChapter(){
				
			},
			// 获取下一章
			getNextChapter(){
				if(this.currIndex > this.book.chapterCnt){
					uni.showToast({
						title: "图书已看完",
						icon: 'info'
					})
				}
				request.get("/business/chapter/"+ (this.currBookId + 1) + "/" + this.currIndex)
					.then((res) => {
						this.currIndex = this.currIndex + 1;
						this.chapters.push(res.data)
						if(this.chapters.length >= 3){
							this.chapters.shift();
						}
						this.currChapter = res.data;
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "下一章加载失败",
							icon: 'error'
						})
					})
			},
			// 获取电池电量信息
			getCurrBatteryInfo(){
				// uni.getBatteryInfo({
				//     success(res) {
				//         console.log(res);
				//         uni.showToast({
				//             title: "当前电量：" + res.level + '%',
				//             icon: 'none'
				//         });
				//     }
				// })
			},
			// 获取当前时间
			getCurrTime(){
				var now = new Date();
				let hour = now.getHours()
				let min = now.getMinutes()
				this.currTime =  hour + ":" + min;
				// console.log(this.currTime)
			},
			// 滑块滑动事件
			scroll(e){
				if(Math.abs(e.detail.scrollTop - this.scrollToTop) > 3){
					this.scrollToTop = e.detail.scrollTop
					this.calcCurrLocationId()
				}
				
			},
			// 计算当前所在元素，并返回ID
			calcCurrLocationId(){
				var tempHeight = parseInt(this.scrollToTop);
				// 假设你有一个id为'parentElement'的元素
				const parentElement = document.getElementById('demo123');
				const children = parentElement.childNodes; // 获取所有子元素
				for (var i = 0; i < children.length; i++) {
					const c = children[i];
					const h = parseInt(c.style.height);
					console.log("当前元素高度：",c.style.height);
					console.log("当前位置为：",c.id,"距离当前元素高度", tempHeight)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	z-index: 1;
	position: fixed;
	height:100%;
	width: 100%;
	// background-color: #238923;
	// 阅读页->头部
	.header{
		height: 3%;
		background-color: #e0d9c6;
		padding: 10px;
	}
	// 阅读页
	.body{
		padding: 0 10rpx 0 10rpx;
		height: calc( 93% - 20px);
		background-color: #e0d9c6;
	}
	// 阅读页->底部
	.footer{
		height: 4%;
		padding: 10px 10px 0 10px;
		background-color: #e0d9c6;
		color: #9d9d9d;
		font-size: 10px;
	}
}
</style>